import React, { Suspense } from "react";

import * as AiIcons from "react-icons/ai";
import * as FaIcons from "react-icons/fa";
import * as MdIcons from "react-icons/md";
import * as RiIcons from "react-icons/ri";
import * as BsIcons from "react-icons/bs";
import * as HiIcons from "react-icons/hi";
import * as LuIcons from "react-icons/lu";
import * as BiIcons from "react-icons/bi";
import * as PiIcons from "react-icons/pi";

const iconPacks: Record<string, Record<string, React.FC<any>>> = {
	ai: AiIcons,
	fa: FaIcons,
	md: MdIcons,
	ri: RiIcons,
	bs: BsIcons,
	hi: HiIcons,
	lu: LuIcons,
	bi: BiIcons,
	pi: PiIcons,
};

interface ReactIconProps {
	name: string; // 现在传 "ai.AiOutlineHome"
	size?: number;
	color?: string;
	className?: string;
}

const ReactIcon: React.FC<ReactIconProps> = ({ name, size = 20, color = "inherit", className }) => {
	// 拆分 lib 和 iconName
	const [lib, iconName] = name.split(".");

	const pack = iconPacks[lib];

	if (!pack) {
		return <span style={{ color: "red" }}>❌ Invalid lib: {lib}</span>;
	}

	const Icon = pack[iconName as keyof typeof pack] as React.FC<any>;

	if (!Icon) {
		return <span style={{ color: "red" }}>⚠️</span>;
	}

	return <Icon size={size} color={color} className={className} />;
};

export default ReactIcon;
